<template>
    <div class="card-item">
        <div class="header-part">
            <span>{{cardAttrs.name}}</span>
            <span class="num-txt" v-if="cardAttrs.num != '' && cardAttrs.num != '--'" @click.stop="onDrillDown(cardAttrs)">{{cardAttrs.num}}</span>
        </div>
        <div class="first-part">
            <div class="item1">
                <span class="text-lay">{{cardAttrs.firstItem.text1}}</span>
                <span class="txt-c">{{cardAttrs.firstItem.text2}}</span>
            </div>
            <div class="item1">
                <span class="text-lay">{{cardAttrs.firstItem.text3}}</span>
                <span class="txt-c">{{cardAttrs.firstItem.text4}}</span>
            </div>
        </div>
        <div class="first-part">
            <div class="item1">
                <span class="text-lay">{{cardAttrs.twoItem.text1}}</span>
                <span class="txt-c">{{cardAttrs.twoItem.text2}}</span>
            </div>
            <div class="item1">
                <span class="text-lay">{{cardAttrs.twoItem.text3}}</span>
                <span class="txt-c">{{cardAttrs.twoItem.text4}}</span>
            </div>
        </div>
        <div class="two-part">
            <div class="item1">
                <span class="text-lay">{{cardAttrs.threeItem.text1}}</span>
                <span class="txt-c">{{cardAttrs.threeItem.text2}}</span>
            </div>
            <div class="item1">
                <span class="text-lay">{{cardAttrs.threeItem.text3}}</span>
                <span class="txt-c">{{cardAttrs.threeItem.text4}}</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        cardAttrs: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    setup(props, { emit }) {
        function onDrillDown(val) {
            if (val.num == "明细") {
                val.num = "返回"
            } else {
                val.num = "明细"
            }
            let params = val
            emit("onDrillDown", params)
        }
        return {
            onDrillDown
        }
    }
}
</script>
<style lang="scss" scoped>
.card-item {
    width: 100%;
    min-height: 150px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-top: 10px;
    background: linear-gradient(90deg, #e0f3f7 0%, #dee3f9 100%);
    .header-part {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: url("@/assets/card-bg.png") no-repeat 0 0;
        background-size: 100% 100%;
        font-size: 13px;
        padding-left: 10px;
        padding-right: 20px;
        color: #ffffff;
        .num-txt {
            color: #666;
            border: 1px solid #1b82cf;
            padding: 4px 8px;
            z-index: 9999;
            text-align: right;
            cursor: pointer;
            font-size: 12px;
        }
    }
    .first-part {
        width: calc(100% - 20px);
        margin: 15px 10px;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-around;
        font-size: 13px;
        color: #777777;
        border-bottom: 1px solid #ffffff;
    }
    .two-part {
        width: calc(100% - 20px);
        margin: 15px 10px;
        padding-bottom: 10px;
        display: flex;
        justify-content: space-around;
        font-size: 13px;
        color: #777777;
        .item1 {
            div:first-child {
                margin-bottom: 10px;
            }
        }
    }
    .item1 {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .text-lay {
        width: 120px;
        text-align: center;
    }
    .txt-c {
        width: 100px;
        color: #1b82cf;
        margin-left: 3px;
    }
    .text-content {
        width: 100%;
        font-size: 12px;
        line-height: 20px;
        padding-left: 20px;
        padding-right: 5px;
        .txt-title {
            color: #777777;
        }
    }
}
</style>